<template>
  <div class="CityList">
    <HeaderSelect></HeaderSelect>
    <Cities :hotCities="hotCities" :cities="cities"></Cities>
  </div>
</template>

<script>

  import HeaderSelect from './components/HeaderSelect.vue'
  import Cities from './components/Cities.vue'
  import axios from 'axios'

  export default {
    name: "CityList",
    data() {
      return {
        hotCities: [],
        cities: [],
      }
    },
    components: {
      HeaderSelect,
      Cities
    },
    methods: {
      getCities() {
        axios.get('/static/mock/city.json')
        .then(res => {
          console.log(res)
          this.hotCities = res.data.data.hotCities;
          this.cities = res.data.data.cities;
        })
      },
    },
    mounted() {
      this.getCities()
    }
  }
</script>

<style lang="less" scoped>
  .CityList {
    background-color: #f5f5f5;
  }
</style>